<template>
  <div class="table">
    <table>
      <thead>
        <tr>
          <th>人员</th>
          <th>等次</th>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="item in userList"
          :key="item.userId"
          :class="{ tip_warning: item.status != '2' && item.status != '3' }">
          <td>{{ item.userName }}</td>
          <td v-if="assessMode === 1">
            <span v-if="(item.status == '2' || item.status == '3') && item.assessRank === '1'">全优</span>
            <span v-else>-</span>
          </td>
          <td v-else>
            <span v-if="item.status == '2' || item.status == '3'">
              {{ (item.assessRank || item.mainLeaderAssessRank || item.leaderAssessRank) | AssessRank }}
            </span>
            <span v-else>-</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'OtherTable',
  components: {},
  props: {
    otherList: {
      type: Array,
      default: () => {
        return []
      },
    },
    assessMode: {
      type: Number,
      default: 2,
    },
  },
  data() {
    return {
      userList: [],
      busSign: '',
    }
  },
  computed: {
    ...mapGetters(['activeEvaluation']),
  },
  watch: {
    otherList: {
      handler(news) {
        // console.log(news)
        this.userList = news
      },
      deep: true,
      immediate: true,
    },
    assessMode: {
      handler(news) {
        console.log('news :>> ', news)
      },
      deep: true,
      immediate: true,
    },
  },
  filters: {
    AssessRank(val) {
      switch (val) {
        case '1':
          return '好'
        case '2':
          return '较好'
        case '3':
          return '一般'
        case '4':
          return '较差'
        case '':
          return '-'
        default:
          break
      }
    },
  },
  created() {
    this.busSign = this.$route.query.busSign
  },
  mounted() {},
  methods: {},
}
</script>

<style lang="scss" scoped>
.table {
  font-size: 12px;
  padding: 0 15px;
  max-height: 30vh;
  overflow-y: auto;
  table {
    width: 100%;
    border-right: 1px solid #eeeeee;
    border-top: 1px solid #eeeeee;
  }
  thead {
    background-color: #f2f2f2;
  }
  tr {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    th,
    td {
      flex: 1;
      padding: 4px 5px;
      border-left: 1px solid #eeeeee;
      border-bottom: 1px solid #eeeeee;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
  }
  .tip_warning {
    color: #ee0a24;
  }
}
</style>
